<template>
  <div class="search">
	  <div class="search-first">
		  	<i class="fa fa-search"></i>
			<input type="text"  v-model="inputValue" :placeholder="plhText" maxlength="10" @change="inputChange" />
	  </div>
	  <div class="text">
	  	<p>电影/电视剧/综艺</p>
	  </div>
	  <ul>
	  	<li v-for="item in searchPlayData" :key="item.id">
	  		<div class="img-wraper">
	  			  <img :src="item.img" >
	  		</div>
	  		<div class="desc-wraper">
	  			<p class="name">{{item.name}}</p>
	  			<p class="font">{{item.font}}</p>
	  			<p class="time">{{item.time}}</p>
	  		</div>
	  		<div class="score">
	  			<p>{{item.score}}</p>
	  		</div>
	  	</li>
	  </ul>
  </div>
</template>
<script>
export default{
	name: 'Search',
	props: {
	    // input框占位文字
	    plhText: {
	      type: String,
	      default: "请输入搜索内容"
	    }
	  },
	data(){
		return {
			searchList: [],
			 inputValue: "" 
		};
	},
	created(){
		this.getSearchData();
	},
	computed:{
	     searchPlayData(){
	         if(this.inputValue==""){
	             return this.searchList;
	         }else{
	             return this.searchList.filter(item=>{
	                 return item.name.includes(this.inputValue);
	             })
	         }
	     }
	  },
	methods: {
		getSearchData(){
			// var that = this;
			axios.get('/mock/searchPlayData.json')
			  .then(response => {
			    console.log(response);
				if(response.status == 200){
					if(response.data && response.data.searchPlayData){
						this.searchList = response.data.searchPlayData;
					}
				}
			  })
			  .catch(function (error) {
			    console.log(error);
			  });
		},
		// 每次输入框变化刷新列表
		    inputChange() {
		      // 使用emit给父组件传值
		      this.$emit('input-changed', this.inputValue);
		    }
	}
}
</script>
<style scoped>
	.search-first{
		width:94%;
		background-color: #f5f6f5;
		box-shadow: 0 1px 1px #CCCCCC;
		padding: 10px;
	}
	input{
		background-color: #FFFFFF no-repeat 13px 13px;
		border: 0;
		width:95%;
		padding: 11px 0;
		text-align: left;
		font-size: 14px;
		font-weight: bold;
		text-indent: 40px;
	}
	i{
		position: absolute;
		margin: 10px;
		font-size: 18px
	}
	.text p{
		font-size: 22px;
		padding: 12px;
		color: #999999;
		font-weight: bold;
	}
	.text{
		border-bottom: 1px solid #CCCCCC;
	}
	
	.score{
		float: right;
		line-height: 30px;
	}
	img{
		width: 70px;
	}
	.img-wraper{
		width: 23%;
		margin-bottom: 10px;
		float: left;
	}
	.desc-wraper{
		width: 60%;
		float: left;
	}
	li{
		margin: 15px;
		/* 清除浮动 */
		overflow: hidden;
		border-bottom: 1px dashed #CCCCCC;
	}
	.name{
		font-size: 20px;
		font-weight: bold;
		margin-bottom: 3px;
	}
	.font{
		font-size: 15px;
		font-weight: bold;
	}
	.time{
		font-size: 15px;
		font-weight: bold;
		margin-top: 6px;
	}
	.desc-wraper{
		width: 50%;
		float: left;
	}
	
	.score p{
		font-size: 20px;
		font-weight: bold;
		color: #FF9900;
	}
</style>


